<template>
  <div id="MyClock">
    <p class="date">{{ date }}</p>
    <p class="time">{{ time }}</p>
    <!--<p class="text">DIGITAL CLOCK with Vue.js</p>-->
  </div>
</template>

<script>

export default {
  name: 'MyClock',
  data() {
    return{
      time: '',
      date: '',
      week: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
    }
  },
  mounted: function () {
    setInterval(this.updateTime, 1000);
    this.updateTime();
  },
  methods: {
    updateTime() {
      let cd = new Date();
      this.time = this.zeroPadding(cd.getHours(), 2) + ':' +
        this.zeroPadding(cd.getMinutes(), 2) + ':' +
        this.zeroPadding(cd.getSeconds(), 2);
      this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' +
        this.zeroPadding(cd.getMonth()+1, 2) + '-' +
        this.zeroPadding(cd.getDate(), 2) + ' ' +
        this.week[cd.getDay()];
    },
    zeroPadding(num, digit) {
      let zero = '';
      for(let i = 0; i < digit; i++) {
        zero += '0';
      }
      return (zero + num).slice(-digit);
    }
  }

}
</script>

<style lang="less">
  /*html, body {*/
    /*height: 100%;*/
  /*}*/

  /*body {*/
    /*background: #0f3854;*/
    /*background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);*/
    /*background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);*/
    /*background-size: 100%;*/
  /*}*/

  p {
    margin: 0;
    padding: 0;
  }

  #MyClock {
    font-family: 'Share Tech Mono', monospace;
    color: #ffffff;
    text-align: center;
    position: absolute;
    left: 48%;
    top: 21%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #daf6ff;
    text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
    width: 100%;
    height: 37%;
    display: flex;
    flex-grow: 0;
    flex-direction: column;
  }
  #MyClock .time {
    letter-spacing: 0.05em;
    font-size: 60px;
    padding: 5px 0;
  }
  #MyClock .date {
    letter-spacing: 0.1em;
    font-size: 24px;
  }
  #MyClock .text {
    letter-spacing: 0.1em;
    font-size: 12px;
    padding: 20px 0 0;
  }

</style>

